<template>
  <div class="down_mian">
    <div class="down_wrap">
      <div class="down_header">填写并核对订单信息</div>
      <div class="dation">展位:{{ stan.standNum }}</div>
      <div v-if="isLease != 1">
        <div class="list_titel">固定费用</div>
        <el-table :data="fixedItemList" style="width: 100%" stripe>
          <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
          <el-table-column prop="sellingGuarantee" label="商品保证金">
          </el-table-column>
          <el-table-column prop="sellingPrice" label="商品单价">
          </el-table-column>
          <el-table-column prop="goodsCount" label="商品数量">
          </el-table-column>
          <el-table-column label="金额" align="center">
            <template slot-scope="scope">
              {{scope.row.goodsCount * scope.row.sellingPrice + scope.row.goodsCount * scope.row.sellingGuarantee}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detion_foot1" v-if="isLease != 1">
        <div class="shop_pice">
          <div>费用总计：</div>
          <div class="shop_pice_pice">{{ fixedpic }}元</div>
        </div>
      </div>
      <div>
        <div class="list_titel">商品费用</div>
        <el-table :data="userItemList" style="width: 100%">
          <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
          <el-table-column prop="sellingGuarantee" label="商品保证金">
          </el-table-column>
          <el-table-column prop="sellingPrice" label="商品单价">
          </el-table-column>
          <el-table-column prop="goodsCount" label="商品数量">
          </el-table-column>
          <el-table-column prop="sizeName" label="商品数量"> </el-table-column>
          <el-table-column label="金额" align="center">
            <template slot-scope="scope">
              {{scope.row.goodsCount * scope.row.sellingPrice + scope.row.goodsCount * scope.row.sellingGuarantee}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detion_foot">
        <!-- <div>返回修改租赁商品</div> -->
        <el-button @click="hanldpath" type="text">返回修改租赁商品</el-button>
        <div class="shop_pice">
          <div>商品租赁费用总计：</div>
          <div class="shop_pice_pice">{{ userpic }}元</div>
        </div>
      </div>
      <div class="contacts_ceten">
        <div class="contactsdata">联系人信息</div>
        <div class="contacts_form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="负责人姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="lxdh">
              <el-input v-model="ruleForm.lxdh"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="liqui_foot">
        <div class="liqui_dation">
          <div>订单总计:</div>
          <div class="loqui_dation_text">{{ userpic + fixedpic }}元</div>
        </div>
        <div class="liqui_dation">
          <el-button @click="hanldgo" type="danger">提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken, setToken } from "@/utils/auth";
import {
  getlist,
  stand_infoid,
  getshopcar,
  addahopcar,
  delshopcar,
  saveOrder,
  confirmOrderItem,
} from "@/api/lease/index";
export default {
  data() {
    return {
      leaselist: [],
      ruleForm: {},
      sizearr: [],
      fixedItemList: [],
      fixedpic: 0,
      userItemList: [],
      userpic: 0,
      rules: {
        name: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" },
        ],
        lxdh: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
      pic: 0,
      stan: {},
      isLease: 0,
      exhibitionType: 1,
    };
  },
  activated() {
    this.isLease = this.$route.query.isLease;
    this.exhibitorType = this.$route.query.exhibitorType;
    this.stan = JSON.parse(getToken("stan"));
    this.getshopcar();
  },
  methods: {
    // 新增订单
    hanldgo() {
      let cartItemIds = [];
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.leaselist.forEach((item, index) => {
            cartItemIds.push(item.cartItemId);
          });
          let formdata = {
            cartItemIds: cartItemIds,
            exhibitionStandInfo: {
              id: this.stan.id,
              standNum: this.stan.standName,
              standArea: this.stan.standArea,
              exhibitionName: this.stan.exhibitionName,
            },
            linkMan: {
              linkName: this.ruleForm.name,
              linkPhone: this.ruleForm.lxdh,
            },
            exhibitorType: this.exhibitorType,
            isLease: this.isLease
          };
          saveOrder(formdata).then((res) => {
            if (res.code == 200) {
              this.$router.push({path:"/payment",query:{
                data:res.data
              }});
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 购物车查询
    getshopcar() {
      let user = JSON.parse(getToken("user"));
      let exhibition = JSON.parse(getToken("exhibition"))
      console.log(this.stan.id)
      getshopcar(user.userId, exhibition.id, this.stan.id).then((res) => {
        this.leaselist = res.rows;
        this.sizearr = [];
        this.leaselist.forEach((item, index) => {
          this.sizearr.push(item.cartItemId);
          this.pic = item.specialPrice;
        });
        console.log(this.sizearr.length);
        if (this.sizearr) {
          this.getdation();
        }
      });
    },
    // 获取信息
    getdation() {
      console.log(this.sizearr);
      let form = {
        cartItemIds: this.sizearr,
        exhibitionStandInfo: {
          id: this.stan.id,
          standNum: this.stan.standNum,
          standArea: this.stan.standArea,
          exhibitionName: this.stan.exhibitionName,
        },
        exhibitorType: this.exhibitorType,
        isLease: this.isLease
      };
      confirmOrderItem(form).then((res) => {
        this.fixedpic = 0;
        this.userpic = 0;
        if (res.code == 200) {
          this.fixedItemList = res.data.fixedItemList;
          this.fixedItemList.forEach((item, index) => {
            this.fixedpic += item.goodsCount * item.sellingPrice + item.goodsCount * item.sellingGuarantee;
          });
          this.userItemList = res.data.userItemList;
          this.userItemList.forEach((item, index) => {
            this.userpic += item.goodsCount * item.sellingPrice + item.goodsCount * item.sellingGuarantee;
          });
        }
      });
    },
    hanldpath() {
      this.$router.push("/lease");
    },
  },
};
</script>
<style scoped>
.down_mian {
  background-color: #f2f2f2;
  padding: 20px;
  min-height: 430px;
}
.down_wrap {
  width: 1100px;
  margin: auto;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f2f2f2;
}
.down_header {
  padding: 20px 0;
  border-bottom: 1px solid #f2f2f2;
}
.list_titel {
  font-size: 20px;
  margin: 20px 0;
  color: #666;
  font-weight: bold;
}
.dation {
  font-weight: bold;
  color: #666;
}
.pice {
  color: #ff0000;
}
.detion_foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
}
.detion_foot1 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
}
.shop_pice {
  display: flex;
}
.shop_pice_pice {
  color: #ff0000;
  margin-left: 20px;
}
.contacts_ceten {
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
}
.contactsdata {
  font-size: 20px;
}
.contacts_form {
  width: 400px;
  margin: 40px 0;
}
.liqui_dation {
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.loqui_dation_text {
  margin-left: 20px;
  color: #ff0000;
}
.liqui_foot {
  margin-top: 20px;
}
/deep/.el-table th.el-table__cell {
  background-color: #f8fcfc !important;
  text-align: center !important;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}
</style>